<!-- eslint-disable vue/html-indent -->
<template>
  <div class="CurrentProcessList">
    <div class="change_box">
      <div class="title">
        <p class="tip">运维事件单</p>
        <button @click="back" class="goBack">返回</button>
      </div>
      <div class="main">
        <el-form ref="searchForm" :inline="true" class="demo-form-inline">
          <el-form-item label="单号" prop="changeCode" class="leftMargiin">
            <el-input
              clearable
              v-model="changeCode"
              class="inline-input"
              placeholder="请输入单号"
            />
          </el-form-item>
          <el-form-item label="标题" prop="changeTitle" class="leftMargiin">
            <el-input
              clearable
              v-model="changeTitle"
              class="inline-input"
              placeholder="请输入标题"
            />
          </el-form-item>
        </el-form>
        <div class="button">
          <button @click="detail" class="btn">查看详情</button>
          <button @click="search" @keyup.enter="monitor()" class="btn reset"> 搜索 </button>
          <button @click="resetForm" class="btn">重置</button>
          <!-- <el-dropdown trigger="click">
                        <span class="el-dropdown-link">
                            导出<i
                                class="el-icon-arrow-down el-icon--right"
                            ></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item
                                icon="el-icon-plus"
                                @click.native="downloadExcel"
                                >导出当前页</el-dropdown-item
                            >
                            <el-dropdown-item
                                icon="el-icon-circle-plus"
                                @click.native="Select_downloadExcel"
                                >导出所有页</el-dropdown-item
                            >
                        </el-dropdown-menu>
                    </el-dropdown> -->
        </div>
      </div>
      <div class="tableBox">
        <div class="desc">
          <img src="../../assets/images/bbsm.png" alt="" />
          {{ desc }}
        </div>
        <div class="table" ref="container">
          <el-table
            :height="tableHeight"
            class="table"
            ref="multipleTableRef"
            :data="changeList"
            tooltip-effect="dark"
            @select="selectChange"
            @selection-change="handleSelectionChange"
            row-key="getRowKey"
            @row-click="handleRowClick"
          >
            <el-table-column align="center" :reserve-selection="false" type="selection">
            </el-table-column>
            <el-table-column align="center" prop="faultNo" label="单号" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              align="center"
              prop="faultDecriptSummary"
              label="事件标题"
              show-overflow-tooltip
            >
            </el-table-column>

            <el-table-column
              align="center"
              prop="sysName"
              label="所属系统"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="groupName"
              label="当前工作组"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="appSubDept"
              label="归属处室"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="systemStage"
              label="系统所处阶段"
              show-overflow-tooltip
            >
              <template #default="scope">
                <span>{{ activation(scope.row.systemStage) }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="是否紧急" show-overflow-tooltip>
              <template #default="scope">
                <span>{{ scope.row.ifJj == 1 ? '是' : scope.row.ifJj == 2 ? '否' : '' }}</span>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              prop="orgName"
              label="发生机构"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="currentHandler"
              label="当前处理人"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column align="center" label="处理方式" show-overflow-tooltip>
              <template #default="scope">
                <span>{{
                  scope.row.dealMode == '01'
                    ? '正常处理'
                    : scope.row.dealMode == '03'
                    ? '多方配合处理'
                    : scope.row.dealMode == '04'
                    ? '数据变更处理'
                    : scope.row.dealMode == '05'
                    ? '差错处理'
                    : scope.row.dealMode == '06'
                    ? '转三线处理'
                    : ''
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="oneSlaName"
              label="一级服务目录"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="twoSlaName"
              label="二级服务目录"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="threeSlaName"
              label="三级服务目录"
              show-overflow-tooltip
            ></el-table-column>
          </el-table>
        </div>

        <!-- 分页 -->
        <el-pagination
          ref="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  import { ref, onMounted, reactive, onBeforeUnmount, computed, watch } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { getPendingCountPagerByType } from '@/http/api/operation';
  const router = useRouter();
  const route = useRoute();
  const changeList = reactive([]);
  const pageNum = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  const changeTitle = ref('');
  const changeCode = ref('');
  // const changeId = ref('');
  const state = ref('');
  const orgId = ref(route.params.value);
  const type = ref(route.params.type);
  // const restaurants = reactive([]);
  const tableHeight = ref(0);
  const desc = ref('');
  const container = ref(null);
  const multipleTableRef = ref<InstanceType<typeof ElTable>>();
  const multipleTable = ref<User[]>([]);
  onMounted(() => {
    calHeight();
    getPage();
    switch (type.value) {
      case '1':
        desc.value = '紧急事件单：紧急状态的运维事件单，且不包含转数据变更单的事件单';
        break;
      case '2':
        desc.value = '处理中事件单：处理中状态运维事件单，且不包含转数据变更单的事件单';
        break;
      case '3':
        desc.value = '待接收：待领取的运维事件单';
        break;
      case '4':
        desc.value = '疑难：标记为疑难事件的运维事件单，不包含转数据变更单的事件单';
        break;
      case '5':
        desc.value = '数据变更：转数据变更的 待领取或处理中的事件单';
        break;
      case '6':
        desc.value = '转三线处理：转项目组三线处理中';
        break;
    }
    enterKeyup();
    // changeOrgan();
    getPendingCountPagerBy_Type();
  });
  const getPage = () => {
    const localPage = localStorage.getItem('current_processing');
    if (localPage != null) {
      pageNum.value = Number(localPage);
    } else {
      pageNum.value = 1;
    }
  };
  const activation = computed(() => {
    return (value) => {
      switch (value) {
        case '01':
          return '需求及技术方案阶段';
          break;
        case '02':
          return '立项阶段';
          break;
        case '03':
          return '开发测试阶段';
          break;
        case '04':
          return '已转生产待投产';
          break;
        case '05':
          return '已投产未交接一线';
          break;
        case '06':
          return '已交接一线未交接二线';
          break;
        case '07':
          return '已交接二线+部分新增功能未交接';
          break;
        case '08':
          return '已交接二线';
          break;
        case '09':
          return '已下线';
          break;

        default:
          break;
      }
    };
  });
  const getPendingCountPagerBy_Type = () => {
    getPendingCountPagerByType({
      pageNum: JSON.stringify(pageNum.value),
      pageSize: JSON.stringify(pageSize.value),
      type: type.value,
      sysId: orgId.value,
      faultDecriptSummary: changeTitle.value,
      faultNo: changeCode.value
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      changeList.length = 0;
      (changeList as any).push(...res.data.rows);
      total.value = res.data.total;
    });
  };
  const monitor = () => {
    document.onkeydown = (e) => {
      if (e.keyCode == 13) {
        search();
      }
    };
  };
  const enterKeyupDestroyed = () => {
    document.removeEventListener('keyup', monitor());
  };
  const enterKeyup = () => {
    document.addEventListener('keyup', monitor());
  };
  const calHeight = () => {
    const rect = container.value.getBoundingClientRect();
    tableHeight.value = rect.height;
  };
  // 导出当前页
  //   const downloadExcel = () => {
  //     // Export2Excel(this.columns, this.changeList);
  //     exportFmBiz({
  //       pageNum: pageNum.value,
  //       pageSize: pageSize.value,
  //       sysid: orgId.value,
  //       faultDecriptSummary: changeTitle.value,
  //       faultNo: changeCode.value,
  //       currentPage: 'currentPage',
  //       flag: flag.value
  //     }).then((res) => {
  //       if ((res as any).data.code !== 0) {
  //         ElMessage({
  //           message: (res as any).data.msg,
  //           type: 'error'
  //         });
  //         return;
  //       } else {
  //         downloadlist(res.data.msg);
  //       }
  //     });
  //   };
  //   const downloadlist = (type: string) => {
  //     download({
  //       fileName: type,
  //       delete: true
  //     }).then((res) => {
  //       const link = document.createElement('a');
  //       let blob = new Blob([res.data], {
  //         type: 'application/vnd.ms-excel'
  //       });
  //       link.style.display = 'none';
  //       link.href = URL.createObjectURL(blob);
  //       link.download = type; //下载的文件名
  //       document.body.appendChild(link);
  //       link.click();
  //       document.body.removeChild(link);
  //     });
  //   };
  //   const Select_downloadExcel = () => {
  //     exportFmBiz({
  //       pageNum: pageNum.value,
  //       pageSize: pageSize.value,
  //       sysid: orgId.value,
  //       faultDecriptSummary: changeTitle.value,
  //       faultNo: changeCode.value,
  //       currentPage: '',
  //       flag: flag.value
  //     }).then((res) => {
  //       if ((res as any).data.code !== 0) {
  //         ElMessage({
  //           message: (res as any).data.msg,
  //           type: 'error'
  //         });
  //         return;
  //       } else {
  //         this.downloadlist(res.data.msg);
  //       }
  //     });
  //   };
  const search = () => {
    if (!state.value) {
      orgId.value = '';
    } else {
      state.value = state.value.replace(/(^\s*)|(\s*$)/g, '');
      if (!orgId.value) {
        orgId.value = state.value;
      }
    }
    pageNum.value = 1;
    changeTitle.value = changeTitle.value.replace(/(^\s*)|(\s*$)/g, '');
    changeCode.value = changeCode.value.replace(/(^\s*)|(\s*$)/g, '');
    getPendingCountPagerBy_Type();
  };
  const resetForm = () => {
    changeTitle.value = '';
    changeCode.value = '';
    state.value = '';
    orgId.value = '';
  };
  const back = () => {
    // this.$router.go(-1);
    router.push({
      name: 'CurrentProcess'
    });
  };
  // 点击行触发，选中或不选中复选框
  const handleRowClick = (row) => {
    multipleTable.value = row;
    multipleTableRef.value.toggleRowSelection(row);
    selectChange(multipleTable.value);
  };
  const selectChange = (selection: string) => {
    if (selection.length > 1) {
      const del_row = selection.shift();
      multipleTableRef.value!.toggleRowSelection(del_row);
    }
  };
  const handleSelectionChange = (val: string) => {
    multipleTable.value = val;
  };
  const detail = () => {
    if (!multipleTable.value.length) {
      Elessage({
        message: '请先勾选查看的数据',
        type: 'warning'
      });
    } else {
      router.push({
        name: 'operation_detail',
        params: {
          value: orgId.value,
          fmId: multipleTable.value[0].fmId,
          typeNum: type.value
        }
      });
    }
  };
  // 分页
  const handleSizeChange = (size) => {
    pageSize.value = size;
    getPendingCountPagerBy_Type();
  };
  const handleCurrentChange = (num) => {
    pageNum.value = num;
    localStorage.setItem('current_processing', num);
    getPendingCountPagerBy_Type();
  };
  onBeforeUnmount(() => {
    enterKeyupDestroyed();
  });
  watch(
    () => router.options.history.state.back,
    (newVal) => {
      if (newVal == '/CurrentProcess') {
        localStorage.removeItem('current_processing');
      }
    },
    { immediate: true }
  );
</script>
<style lang="less" scoped>
  .CurrentProcessList {
    width: 100%;
    height: 100vh;
    background: #eaeef4;
    padding: 20px;
    box-sizing: border-box;
    .change_box {
      height: 100%;
      .title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        .tip {
          height: 34px;
          line-height: 34px;
          font-size: 18px;
          font-weight: 400;
          color: #46545d;
          margin: 0;
          padding: 0;
        }
        .goBack {
          background: #007af5;
          width: 80px;
          height: 34px;
          border: none;
          color: #fff;
          font-size: 12px;
          font-weight: 400;
        }
      }

      .main {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        .demo-form-inline {
          display: flex;
          height: 34px;
          align-items: center;
          // justify-content: space-around;
          // padding-top: 3%;
          // flex-wrap: wrap;
          // background: skyblue;
          :deep(input::placeholder) {
            font-size: 14px;
            font-weight: 400;
            color: #bbbbbb;
          }
          :deep(.el-form-item) {
            margin-bottom: 0;
            line-height: 34px;
            height: 34px;
            &.leftMargiin {
              margin-left: 9px;
            }
          }
          :deep(.el-form-item__content) {
            line-height: 34px;
            //height: 43px;
            :deep(.inline-input) {
              width: 230px;
              height: 34px;
            }
          }
          :deep(.el-input__inner) {
            width: 230px;
            // height: 34px;
            background: #ffffff;
            // border: 1px solid #dddddd;
            border-radius: 2px;
          }
          :deep(.el-form-item__label) {
            // color: #6fd7f7;
            font-size: 14px;
            font-weight: 400;
            color: #46545d;
            height: 34px;
            line-height: 34px;
          }
        }
        .button {
          // width: 90%;
          // margin-bottom: 10px;
          display: flex;
          justify-content: space-around;

          .btn {
            // width: 80px;
            padding: 0 20px;
            height: 34px;
            line-height: 34px;
            background: #007af5;
            border-radius: 2px;
            font-size: 12px;
            font-weight: 400;
            color: #ffffff;
            border: 0;
            &.reset {
              margin: 0 10px;
            }
          }
          #goBack {
            width: 131px;
            height: 34px;
            background: #007af5;
            border-radius: 2px;
            border: 0;
            font-size: 12px;
            font-weight: 400;
            color: #ffffff;
          }
          .el-dropdown {
            margin: 0px 10px;
          }
          .el-dropdown-link {
            display: inline-block;
            width: 80px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            color: #fff;
            background: #007af5;
            border-radius: 2px;
          }
        }
      }

      .tableBox {
        height: calc(100% - 114px);
        background: #fff;
        padding: 20px;
        box-sizing: border-box;
        //overflow: hidden;
        .desc {
          font-size: 12px;
          font-weight: 400;
          color: #ec4b5a;
          background: #fbdbde;
          line-height: 33px;
          height: 33px;
          text-align: center;
          border-radius: 2px;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 16px;
            height: 16px;
            // margin: auto;
            margin-right: 10px;
          }
        }
        .table {
          // background: rgba(0, 0, 0, 0.1);
          height: calc(100% - 93px);
          width: 100%;
          margin-bottom: 15px;
          :deep(.el-table-column--selection.is-leaf .el-checkbox) {
            display: none;
          }
          :deep(.el-table__cell.is-leaf) {
            //background: rgba(0, 0, 0, 0.1);
            // color: #6fd7f7;
            //color: #fff;
            color: #929ea8;
          }

          :deep(tr:hover > td) {
            background-color: transparent;
          }
          :deep(.el-table__empty-text) {
            //color: #fff;
            color: #929ea8;
          }
          :deep(td.el-table__cell) {
            //color: #fff;
            color: #929ea8;
          }
        }
        .el-pagination {
          height: 34px;
          padding: 0;
          box-sizing: border-box;
          width: 50%;
          :deep(.el-pagination__total) {
            font-size: 14px;
            font-weight: 400;
            color: #bbbbbb;
            line-height: 34px;
          }

          :deep(.el-input__inner) {
            height: 34px;
            //width: 60px;
            background: #fff;
            //color: #66b1ff;
            color: #46545d;
          }
          :deep(button:disabled) {
            background: #fff;
            height: 34px;
            line-height: 34px;
            border: 1px solid #dddddd;
            //color: #66b1ff;
            color: #46545d;
            box-sizing: border-box;
          }
          :deep(.el-pager li) {
            //background: rgba(0, 0, 0, 0.1);
            background: #fff;
            height: 34px;
            line-height: 34px;
            border: 1px solid #dddddd;
            //color: #66b1ff;
            color: #46545d;
            box-sizing: border-box;
            &.active {
              // color: #fff;
              color: #46545d;
            }
          }
          :deep(.btn-prev) {
            background: #fff;
            height: 34px;
            line-height: 34px;
            border: 1px solid #dddddd;
            //color: #66b1ff;
            color: #46545d;
            box-sizing: border-box;
          }
          :deep(.btn-next) {
            background: #fff;
            height: 34px;
            line-height: 34px;
            border: 1px solid #dddddd;
            //color: #66b1ff;
            color: #46545d;
            box-sizing: border-box;
          }
          :deep(span:not([class*='suffix'])) {
            color: #bbbbbb;
          }
          .el-pagination__jump {
            height: 34px;
            line-height: 34px;
          }
        }
      }
    }
  }
</style>
